<!-- 人员档案详情-头部组件 -->
<template>
  <div class="wrap">
    <div class="box1">
      <div class="box1-avatar">
        <a-avatar :size="64" :image-url="humanInfo?.headPortrait">
          {{ humanInfo?.name }}</a-avatar
        >
      </div>
      <div class="box1-item">
        <div>
          <a-descriptions
            :data="list"
            layout="inline-horizontal"
            :column="3"
            :align="{ label: 'right' }"
            size="mini"
            :label-style="{
              color: '#000'
            }"
          >
            <template #title>
              <a-space>
                <span> {{ humanInfo?.name }}</span>
                <a-tag :color="isBlacklist ? 'red' : 'blue'">{{
                  isBlacklist
                    ? '黑名单'
                    : getControlValue(
                        humanInfo?.useTemplate?.collectionModel,
                        'C612A1730AFBF44F8B16A5B681F5B5B86'
                      ) || '---'
                }}</a-tag>
                <div>
                  <a-progress
                    v-model:percent="progress"
                    size="large"
                    :style="{ width: '300px' }"
                  />
                </div>
              </a-space>
            </template>
            <template #label="{ data }">
              <div class="icon">
                <IconFont :type="data.icon" />
                {{ data.label }}
              </div>
            </template>
          </a-descriptions>
        </div>
        <a-space>
          <!-- <span class="title">人才标签</span> -->
          <a-tooltip content="添加人才标签">
            <icon-plus-circle
              class="title"
              style="cursor: pointer"
              :size="16"
              @click="addTag"
            />
          </a-tooltip>

          <a-tag
            v-for="(item, index) in allSubTags.filter((el:any) => tagData.includes(el.id))"
            :key="item.id"
            :color="TAG_COLOR_ENUMS[index % TAG_COLOR_ENUMS.length]"
          >
            {{ item.name }}
          </a-tag>
        </a-space>
      </div>
    </div>
    <a-space class="btn">
      <a-dropdown @select="handleSelect" :popup-max-height="false">
        <a-button type="primary">
          <a-space> <span>更多功能</span><icon-down /> </a-space>
        </a-button>
        <template #content>
          <a-doption :value="1" v-if="humanInfo?.proceduresStatus === 2"
            >人事异动</a-doption
          >
          <a-doption :value="2">开具证明</a-doption>
        </template>
      </a-dropdown>
      <a-dropdown @select="handleSelect" :popup-max-height="false">
        <a-button type="outline">
          <a-space>
            <IconFont type="icon-gl-printer" /><span>打印</span>
          </a-space>
        </a-button>
        <template #content>
          <a-doption :value="3">打印员工信息</a-doption>
          <a-doption :value="4">打印身份证原件</a-doption>
        </template>
      </a-dropdown>
      <a-dropdown @select="handleSelect" :popup-max-height="false">
        <a-button type="outline">
          <a-space> <IconFont type="icon-daochu" /><span>导出</span> </a-space>
        </a-button>
        <template #content>
          <a-doption :value="5">导出附件</a-doption>
          <a-doption :value="6">导出员工信息</a-doption>
        </template>
      </a-dropdown>
    </a-space>
    <!-- <div class="box2">
      <div class="box2-item">
        <a-space>
          <span class="title">人才标签</span>
          <icon-plus-circle
            class="title"
            style="cursor: pointer"
            :size="16"
            @click="addTag"
          />
          <a-tag
            v-for="(item, index) in allSubTags.filter((el:any) => tagData.includes(el.id))"
            :key="item.id"
            :color="TAG_COLOR_ENUMS[index % TAG_COLOR_ENUMS.length]"
          >
            {{ item.name }}
          </a-tag>
        </a-space>
      </div>
      <!== <div>
        <a-space>
          <a-button type="outline">员工对比</a-button>
          <a-button
            type="outline"
            @click="
              router.push({
                name: 'HandleTransaction',
                query: {
                  id
                }
              })
            "
            v-if="humanInfo.progress === 5"
          >
            人事异动
          </a-button>
          <a-button type="outline">更多功能</a-button>
        </a-space>
      </div> ==>
    </div> -->
  </div>
  <HumanTagModal
    v-model:visible="humanTagModalVisible"
    :data="tagData"
    @tag-save="tagSave"
  />
</template>

<script lang="ts" setup>
import headerImg from '@/assets/images/humanRousterImg.png';
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
import { getControlValue } from '@/utils/control';
import {
  getOrganizationDetailById,
  getPositionDetailById,
  getAllHumanSubTags
} from '@/utils/common';
import { PutHumanTag } from '@/apis/management/home/workPlace';
import { TAG_COLOR_ENUMS } from '@/utils/constants';
import { changeControlData } from '@/utils/control';

const route = useRoute();
const router = useRouter();

let id = Number(route.query.id);
let isBlacklist = Number(route.query.isBlacklist); // 是否为黑名单

onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  getData();
});

const list = reactive([
  {
    label: '部门:',
    value: '',
    icon: 'icon-bumenguanli'
  },
  {
    label: '职位:',
    value: '',
    icon: 'icon-gangweiguanli'
  },
  {
    label: '汇报上级:',
    value: '',
    icon: 'icon-yuangong'
  },

  {
    label: '手机号码:',
    value: '',
    icon: 'icon-shoujihaoma'
  },
  {
    label: '邮箱:',
    value: '',
    icon: 'icon-youxiang'
  },
  {
    label: '入职时间:',
    value: '',
    icon: 'icon-shijian1'
  }
]);

let humanInfo = ref({}); // 人员详情信息
let progress = ref(0); // 人员进度
const getData = async () => {
  try {
    const data = await GetHumanRosterDetail({ id });
    humanInfo.value = data;
    console.log('humanInfo.value ', humanInfo.value);
    progress.value = getHumanProgress(data.ctlValue);
    getListData(data);
    tagData.value =
      humanInfo.value?.personTip !== ''
        ? humanInfo.value?.personTip?.split(',').map((el: any) => Number(el))
        : [];

    console.log('=======tagData=============================');
    console.log(humanInfo.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 获取人员信息完整度
const getHumanProgress = (arr) => {
  let ind = 0;
  arr.forEach((item) => {
    if (item?.ctlValue) {
      ind++;
    }
  });
  return (arr.length / ind / 100).toFixed(4);
};

// 获取标签的信息
const getListData = async (data: any) => {
  try {
    const [companyRes, departmentRes, positionRes, humanSubTagsRes] =
      await Promise.all([
        getOrganizationDetailById(data?.companyId),
        getOrganizationDetailById(data?.departmentId),
        getPositionDetailById(data?.positionId),
        getAllHumanSubTags()
      ]);
    list[0].value = departmentRes?.name || '---';
    list[1].value = positionRes?.name || '---';
    list[2].value = getControlValue(
      data?.useTemplate?.collectionModel,
      'C2276E2F73E8D4DAF9160F61B2C8BCEBA'
    );
    list[3].value =
      getControlValue(
        data?.useTemplate?.collectionModel,
        'C3384BE6E60C341D68B8180DA04A1C4E1'
      ) || '---';
    list[4].value =
      getControlValue(
        data?.useTemplate?.collectionModel,
        'CDA91C3B660FC46CBA7978E7031672229'
      ) || '---';
    list[5].value =
      getControlValue(
        data?.useTemplate?.collectionModel,
        'CC0D5415792B24BBCAD7DF5AB8A25A0AB'
      ) || '---';

    allSubTags.value = humanSubTagsRes;
  } catch (error: unknown) {
    console.log(error);
  }
};

let humanTagModalVisible = ref(false);
let allSubTags = ref([]); // 储存所有子标签
let tagData = ref([]); // 储存当前人员的标签
// 新增标签
const addTag = () => {
  humanTagModalVisible.value = true;
};

// 新增人才标签自定义事件
const tagSave = async (ids: number[]) => {
  try {
    tagData.value = ids;
    await PutHumanTag({
      type: 2,
      id,
      text: ids.join(',')
    });
  } catch (error: unknown) {
    console.log(error);
  }
};

const handleSelect = (key: number) => {
  switch (key) {
    case 1:
      router.push({
        name: 'HandleTransaction',
        query: {
          id
        }
      });
      break;
    case 2:
      break;
    case 3:
      break;
    case 4:
      break;
    default:
      break;
  }
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  padding: 20px 30px;
  border: 1px solid #eee;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.098) 0 0 20px;
  border-radius: 8px;

  .box1 {
    display: flex;
    &-avatar {
      align-self: center;
      margin-right: 20px;
    }
    &-item {
      width: 50%;
      .title {
        color: #165dff;
      }
    }
  }
  .btn {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  // .box2 {
  //   display: flex;
  //   justify-content: space-between;
  //   margin-top: 20px;
  //   // background-color: yellow;

  //   &-item {
  //     .title {
  //       color: #165dff;
  //     }
  //   }
  // }
}
</style>
